<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="实名认证"> </mh-header>
      <article>
        <div class="panel base-info mh-pd">
          <h4>上传身份证</h4>
          <div class="photo flex-bt">
            <div class="photo-box positive mui-text-center">
              <div class="upload-box">
                <div class="upload-ico"></div>
                <img v-if='frontCard' class="upload-img" :src="frontCard">
                <input type="file" class="upload-file" @change='uploadImg($event, 1)'>
              </div>
              <p class="up-label">手持身份证正面照片</p>
              <p class="up-tip">（人像清晰，证件完整）</p>
            </div>

            <div class="photo-box negative mui-text-center">
              <div class="upload-box">
                <div class="upload-ico"></div>
                <img v-if='backCard' class="upload-img" :src="backCard">
                <input type="file" class="upload-file" @change='uploadImg($event, 2)'>
              </div>
              <p class="up-label">手持身份证反面照片</p>
              <p class="up-tip">（文字清晰，四角齐全）</p>
            </div>
          </div>
          <div class="question-row">
            <h4><img src="../../../assets/images/ico/ic_p_question.png" alt="图标">为什么要认证</h4>
            <p>行业红娘是指红娘所从事的行业，具有广泛的人脉和单身人士，
              申请前请在个人资料填写行业类别</p>
          </div>
          <div class="question-row">
            <h4><img src="../../../assets/images/ico/ic_p_secrete.png" alt="图标">关于隐私安全</h4>
            <p>行业红娘是指红娘所从事的行业，具有广泛的人脉和单身人士，
              申请前请在个人资料填写行业类别</p>
          </div>

          <div class="mui-content-padded">
            <button type="button" class="mui-btn-block mh-btn" @click='submit'>提交</button>
          </div>

        </div>
      </article>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "verified",
    components: {
      MhHeader
    },
    data () {
      return {
        frontCard: '',
        backCard: ''
      }
    },
    methods: {
      uploadImg(e, type){
        let self = this;
        let formData = new FormData();
        formData.append('file', e.target.files[0]);
        formData.append('token', window.localStorage.getItem("uploadToken"));
        mui.toast('上传中');
        MH_API.uploadImg(formData).then(res => {
          if (res.key) {
            mui.toast('上传成功');
            if(type==1){
              self.frontCard = MH_API.QN_url+res.key;
            }
            else if(type==2){
              self.backCard = MH_API.QN_url+res.key;
            }
          }
        })
      },
      submit(){
        let self = this;
        MH_API.applyRealName({
          id_card_frontage: self.frontCard,
          id_card_back: self.backCard
        }).then(res => {
          if (res.status === 200) {
            mui.toast('提交成功');
            setTimeout(function(){
              self.$router.go(-1)
            }, 1500)
          }
          else{
            mui.toast(res.msg);
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";

  .panel {
    background-color: #fff;
    @include sc(1.4rem, #333);
    h4 {@include sc(1.4rem, #333);}
    .panel-label {color: #aaa;}
    .panel-val {color: #666;}
  }
  .photo {margin: 1rem 0;}
  .photo-box {
    width: 100%;
    .up-label {@include sc(1.2rem, #666);}
    .up-tip {@include sc(1.1rem, #999);}
  }
  .upload-box {
    position: relative;
    width: 100%;
    height: 10.4rem;
    margin-bottom: .5rem;
    .upload-ico {
      @include center;
      width: 4.8rem;
      height: 4.8rem;
      background: rgba(0,0,0,.5) url("../../../assets/images/ico/ic_p_camera.png") no-repeat center center;
      background-size: 50% 40%;
      border-radius: 100%;
    }
    .up-label {@include sc(1.2rem, #666);}
    .up-tip {@include sc(1.1rem, #999);}
    .upload-img{ width:100%; height:100%; position:absolute;top:0;left:0; z-index:100;}
    .upload-file{ width:100%; height:100%; position:absolute;top:0;left:0; z-index:101; opacity:0;}
  }
  .positive {
    margin-right: 1rem;
    .upload-box {
      background: url("../../../assets/images/bg/bg_card.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .negative {
    .upload-box {
      background: url("../../../assets/images/bg/bg_card_ne.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .question-row {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    h4 {
      padding: 0 0 .8rem 0;
      img {
        height: 1.25rem;
        width: auto;
        margin-right: .5rem;
      }
    }
  }
  .mui-content-padded {margin-top: 3rem;}
</style>
